.nova-color-picker-panel-inner {
  line-height: var(--nova-line-height);
  font-family: var(--nova-font-sans-serif);
  user-select: none;
  padding: 10px;
  font-size: var(--nova-font-size);
  width: 330px;
  display: grid;
  grid-template-columns: 220px auto;
}

.nova-color-picker-close-wrap {
  grid-column: 2;
  margin: -10px -10px -20px -10px;
  justify-self: flex-end;
  width: 30px;
}

.nova-color-picker-close {
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 18px;
  padding: 5px;
  color: var(--nova-color-symbol);
  border-radius: 50%;
  cursor: pointer;

  &:hover {
    color: var(--nova-color-font);

    .md-icon {
      border: var(--nova-border-primary);
    }
  }

  &:focus {
    outline: none;

    .md-icon {
      border: var(--nova-border-primary);
      box-shadow: var(--nova-shadow-primary);
    }
  }

  .md-icon {
    border-radius: var(--nova-radius-close);
    border: var(--nova-border-invisible);
    transition: var(--nova-transition-component);
  }
}
